<template  lang="pug">
.main
  .bannerHeader
    img(:src="ossBaseUrl + 'vip/banner.png'")
  .container
    .section.section2
      .title 加入VIP
      .tabBox
        .tab
          .item.item1(:class="activeTab===1?'active':null" @click="activeTab=1")
            .icon
              img(v-if="activeTab===1" :src="vip11")
              img(v-else :src="vip10")
            .p1 {{tabContentData[0].title}}
            p {{tabContentData[0].desc}}
          .item.item2(:class="activeTab===2?'active':null" @click="activeTab=2")
            .icon
              img(v-if="activeTab===2" :src="vip21")
              img(v-else :src="vip20")
            .p1 {{tabContentData[1].title}}
            p {{tabContentData[1].desc}}
          .item.item3(:class="activeTab===3?'active':null" @click="activeTab=3")
            .icon
              img(v-if="activeTab===3" :src="vip31")
              img(v-else :src="vip30")
            .p1 {{tabContentData[2].title}}
            p {{tabContentData[2].desc}}
        .content(:class="'active'+activeTab")
          .p1 {{tabContentData[activeTab-1].title}}特权介绍
          .list
            .item(v-for="(i,index) in tabContentData[activeTab-1].list" :key="index") {{index+1}}.  {{i}}
          .btn
            el-button(type="error") 加入{{tabContentData[activeTab-1].title}}
      img(:src="ossBaseUrl + 'vip/associator.png'")

</template>

<script>
export default {
  components: {},
  data() {
    return {
      headerLinkData: [
        {
          title: "在线咨询",
          link: "/vip"
        },
        {
          title: "智能系统",
          link: "/vip"
        },
        {
          title: "实时税务信息传递",
          link: "/vip"
        },
        {
          title: "专题定制",
          link: "/vip"
        },
        {
          title: "纳税筹划",
          link: "/vip"
        },
        {
          title: "专项委托",
          link: "/vip"
        }
      ],
      activeTab: 1,
      tabContentData: [
        {
          title: "V1 会员",
          desc: "每天5元仅仅一次停车费的费用",
          list: [
            "升级V1会员，赠送会员积分。",
            "每日登录送积分。",
            "海量、专业的税收法规，全库免费查询与使用。",
            "实时、有效的税法政策解读、名家税谈免费阅读。",
            "精品、最新热点文章免费全篇查阅。",
            "免费使用税务答疑--智能问答。",
            "专家在线答疑，有问必答。",
            "免费查询当下全部热点问答。",
            "税务小工具免费使用。",
            "免费下载全部税务资料。",
            "免费使用全部个人所得税智能计算分析系统。",
            "免费实时税务信息传递。"
          ]
        },
        {
          title: "V2 会员",
          desc: "每天5元仅仅一次停车费的费用",
          list: [
            "升级V2会员，赠送会员积分。",
            "每日登录送积分。",
            "海量、专业的税收法规，全库免费查询与使用。",
            "实时、有效的税法政策解读、名家税谈免费阅读。",
            "精品、最新热点文章免费全篇查阅。",
            "免费使用税务答疑--智能问答。",
            "专家在线答疑，有问必答，优先答复。",
            "免费查询当下全部热点问答。",
            "税务小工具免费使用。",
            "免费下载全部税务资料。",
            "免费使用全部个人所得税以及企业所得税智能计算分析系统。",
            "免费实时税务信息传递。",
            "价值2千元的税务培训卡。"
          ]
        },
        {
          title: "V3 会员",
          desc: "每天5元仅仅一次停车费的费用",
          list: [
            "升级V3会员，赠送会员积分。",
            "每日登录送积分。",
            "海量、专业的税收法规，全库免费查询与使用。",
            "实时、有效的税法政策解读、名家税谈免费阅读。",
            "税务专家根据会员需求定向推送精品专题。",
            "免费使用税务答疑--智能问答。",
            "专家在线答疑，有问必答，迅捷答复。",
            "免费查询当下全部热点问答。",
            "税务小工具免费使用。",
            "免费下载全部税务资料。",
            "免费使用全部个人所得税以及企业所得税智能计算分析系统。",
            "免费实时税务信息传递。",
            "价值3万元的税务筹划专项服务优惠卡和价值5千元的税务培训卡。"
          ]
        }
      ],
      ossBaseUrl:'http://huaban-web.oss-cn-beijing.aliyuncs.com/huaban-enterprise/',
      vip10: require("@/assets/vip/金卡.png"),
      vip11: require("@/assets/vip/反白效果.png"),
      vip20: require("@/assets/vip/钻石.png"),
      vip21: require("@/assets/vip/钻石反白.png"),
      vip30: require("@/assets/vip/皇冠.png"),
      vip31: require("@/assets/vip/皇冠反白.png"),
      activeServicetab: 1
    };
  },
  computed: {},
  methods: {},
  created() {},
  mounted() {}
};
</script>

<style lang="less" scoped>
@tabColor1: orange;
@tabColor2: #59b8f7;
@tabColor3: #9f7bcb;
@headerItemColor: #5c3b06;
@c-border: @border;

.main{
  //- margin-top:@navHeight;
}
.container {
  .mCenter;
  max-width: 1200px;
}
.bannerHeader {
  height: 660px;
  position: relative;
  img {
    //- width: 100%;
  }
}
.section2 {
  background: @white;
  padding: 2em;
  > img {
    transform: translateX(-30px);
    margin-top: 14px;
  }
  .title {
    .size(24px);
    margin-bottom: 1em;
  }
  .tabBox {
    height: 630px;
    .tab {
      height: 100%;
      .inline;
      .item {
        padding: 20px;
        width: 260px;
        height: calc(~"100% / 3");
        .border(transparent);
        .pointer;
        .icon {
          .mCenter;
          margin-top: 10px;
          height: 80px;
          img {
            width: 80px;
          }
        }
        .p1 {
          font-weight: bold;
          .size(18px);
          .lh(35px);
        }
      }
      .item1 {
        background: @white;
        .border;
        .p1 {
          color: @tabColor1;
        }
        &.active {
          background: @tabColor1;
          border-right: none;
          color: @white;
          .p1 {
            color: @white;
          }
        }
      }
      .item2 {
        background: @white;
        .border;
        .p1 {
          color: @tabColor2;
        }
        &.active {
          background: @tabColor2;
          border-right: none;
          color: @white;
          .p1 {
            color: @white;
          }
        }
      }
      .item3 {
        background: @white;
        .border;
        .icon {
          margin-top: -5px;
          margin-bottom: 10px;
        }
        .p1 {
          color: @tabColor3;
        }
        &.active {
          background: @tabColor3;
          color: @white;
          border-right: none;
          .p1 {
            color: @white;
          }
        }
      }
    }
    .content {
      .inline;
      .border;
      vertical-align: top;
      width: calc(~"100% - 300px");
      height: 100%;
      padding: 2em 6em;
      position: relative;
      .left;
      .p1 {
        .size(20px);
        .lh(60px);
        font-weight: bold;
      }
      .list {
        .lh(35px);
      }
      .btn {
        .center;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 20px;
      }
    }
    .content.active1 {
      .border(@tabColor1);
      .p1 {
        color: @tabColor1;
      }
    }
    .content.active2 {
      .border(@tabColor2);
      .p1 {
        color: @tabColor2;
      }
    }
    .content.active3 {
      .border(@tabColor3);
      .p1 {
        color: @tabColor3;
      }
    }
  }
}
</style>
